<!--Email Notification-->
<p-accordion class="receivers_p-accordion" [multiple]="true">
    <p-accordionTab header="{{'email_notification'|translate}}" [selected]="true">
        <div class="iptGroup">
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'email_account' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="{{'email_account'|translate}}" pInputText maxlength="24"
                           [(ngModel)]="this.emailNotification.emailAccount">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'mail_server' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="{{'mail_server'|translate}}" pInputText maxlength="24"
                           [(ngModel)]="this.emailNotification.mailServer">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'user_id' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                           [(ngModel)]="this.emailNotification.userId">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'password' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                           [(ngModel)]="this.emailNotification.password">
                </div>
            </div>
        </div>
        <div class="btnGroup">
            <button class="button-type header-button-right btnItem" pButton
                    label="{{'apply_change' | translate}}"
                    (click)="applyChange(emailNotification)"></button>
            <button class="button-type header-button-right btnItem" disabled pButton
                    label="{{'restore_default' | translate}}"></button>
        </div>
    </p-accordionTab>
</p-accordion>
<!--GSM Proxy Notification -->
<p-accordion class="receivers_p-accordion" [multiple]="true">
    <p-accordionTab header="{{'GSM_proxy_notification'|translate}}" [selected]="true">
        <div class="iptGroup">
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'GSM_proxy_URL' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="{{'GSM_proxy_URL'|translate}}" pInputText maxlength="24"
                           [(ngModel)]="this.GSMProxyNotification.GSMProxyURL">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'user_id' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                           [(ngModel)]="this.GSMProxyNotification.userId">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'password' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                           [(ngModel)]="this.GSMProxyNotification.password">
                </div>
            </div>
        </div>
        <div class="btnGroup">
            <button class="button-type header-button-right btnItem" pButton
                    label="{{'apply_change' | translate}}"
                    (click)="applyChange(GSMProxyNotification)"></button>

            <button class="button-type header-button-right btnItem" disabled pButton
                    label="{{'restore_default' | translate}}"></button>
        </div>
    </p-accordionTab>
</p-accordion>
<!--GSM Cloud Notification-->
<p-accordion class="receivers_p-accordion" [multiple]="true">
    <p-accordionTab header="{{'GSM Cloud Notification'|translate}}" [selected]="true">
        <div class="iptGroup">
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'GSM_cloud_URL' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="{{'GSM_cloud_URL'|translate}}" pInputText maxlength="24"
                           [(ngModel)]="this.GSMCloudNotification.GSMCloudURL">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'user_id' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                           [(ngModel)]="this.GSMCloudNotification.userId">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'password' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                           [(ngModel)]="this.GSMCloudNotification.password">
                </div>
            </div>
        </div>
        <div class="btnGroup">
            <button class="button-type header-button-right btnItem" pButton
                    label="{{'apply_change' | translate}}"
                    (click)="applyChange(GSMCloudNotification)"></button>

            <button class="button-type header-button-right btnItem" disabled pButton
                    label="{{'restore_default' | translate}}"></button>
        </div>
    </p-accordionTab>
</p-accordion>
<!--GSM Gateway Notification-->
<p-accordion class="receivers_p-accordion" [multiple]="true">
    <p-accordionTab header="{{'GSM_gateway_notification'|translate}}" [selected]="true">
        <div class="iptGroup">
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'baud_rate' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="{{'baud_rate'|translate}}" pInputText maxlength="24"
                           [(ngModel)]="this.GSMGatewayNotification.baudRate">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'parity' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="{{'parity'|translate}}" pInputText maxlength="24"
                           [(ngModel)]="this.GSMGatewayNotification.parity">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'data_bits' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="{{'data_bits'|translate}}" pInputText maxlength="24"
                           [(ngModel)]="this.GSMGatewayNotification.dataBits">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'stop_bits' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="{{'stop_bits'|translate}}" pInputText maxlength="24"
                           [(ngModel)]="this.GSMGatewayNotification.stopBits">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                    {{'handshake' | translate}}:
                </div>
                <div class="local-accordion-text-value">
                    <input class="input-style" placeholder="{{'handshake'|translate}}" pInputText maxlength="24"
                           [(ngModel)]="this.GSMGatewayNotification.handshake">
                </div>
            </div>
            <div class="iptGroup_item">
                <div class="local-accordion-text-key">
                </div>
                <div class="local-accordion-text-value">
                    <!--                    <p-checkbox [(ngModel)]="checked" [binary]="true"></p-checkbox>-->
                    <input type="checkbox" [(ngModel)]="checked">
                    <label>{{'require_SIM_PIN'|translate}}</label>
                </div>
            </div>
            <div *ngIf="checked">
                <div class="iptGroup_item">
                    <div class="local-accordion-text-key">
                        {{'SIM_PIN' | translate}}:
                    </div>
                    <div class="local-accordion-text-value">
                        <input class="input-style" placeholder="{{'********'|translate}}" pInputText maxlength="24"
                               [(ngModel)]="this.GSMGatewayNotification.SIM_PIN">
                    </div>
                </div>
            </div>
        </div>
        <div class="btnGroup">
            <button class="button-type header-button-right btnItem" pButton
                    label="{{'apply_change' | translate}}"
                    (click)="applyChange(GSMGatewayNotification)"></button>
            <button class="button-type header-button-right btnItem" disabled pButton
                    label="{{'restore_default' | translate}}"></button>
        </div>
    </p-accordionTab>
</p-accordion>
<!--Apply Change dialog-->
<p-dialog header="{{'Configuration Change Confirmation'| translate}}" [(visible)]="display" styleClass="p-fluid"
          [modal]="true">
    {{'Are sure you want to make changes to the Configuration'| translate}}？
    <br>
    {{'The changes will be only effective after the device been rebooted'| translate}}！

    <div class="p-grid local-accordion-body">
        <div class="p-col-4">
            <button class="button-type header-button-right" pButton
                    label="{{'cancel' | translate}}" (click)="cancel()"></button>
        </div>
        <div class="p-col-4">
            <button class="button-type header-button-right" pButton
                    label="{{'apply' | translate}}" (click)="apply()"></button>
        </div>
        <div class="p-col-4">
            <button class="button-type header-button-right" pButton
                    label="{{'apply & reboot' | translate}}"></button>
        </div>
    </div>
</p-dialog>


